import React, { Component } from 'react';
import Banner from './Component/banner/Banner';
import Category from './Component/category/Category';
import Rank from './Component/rank/Rank';
import NaveSelection from './Component/selection/NavSelection';
import axios from 'axios';
import { Spin } from 'antd';
import 'antd/lib/spin/style/index.css';
import 'antd/lib/modal/style/index.css';
import 'antd/lib/button/style/index.css';
import apiUrl from './Config/web';
import { get } from './Lib/Http';
import Vip from './Component/vip/Vip';
import {Toast} from 'antd-mobile';

class Home extends Component {


    componentDidMount(){

        let that = this;

        window._hmt.push(['_trackPageview', '/']);

        get(apiUrl.index, {}, function (response) {
            if(response.status === 200){
                that.setState(response.data);
            }
        }, function (error) {
            console.log(error); 
        });

        
    }


    categoryList(width){

        let category = this.state.category;
        let isVip = this.state.is_vip;

        console.log(isVip);

        category.splice(2, 0, {});

        return category.map((value, index)=>{
            if(index === 2){

                if(isVip === true){
                    return;
                }

                return (
                   <Vip/>
                );
            }
            return (
                <Category key={index} width={width} data={value} />
            );
        });

    }

    render(){


        if(this.state === null){
            return (<Spin tip="Loading..." className="home-loding" size="large" />);
        }else{

            let width = window.innerWidth;
            let category = this.categoryList(width);

            return (
                <div className="root">
                    <Banner time={3000} width={width}  data={this.state.banner} />
                    {category}
                    <Rank data={this.state.rank} />
                    <NaveSelection history={this.props.history} action="home"></NaveSelection>
                    <div className="stub"></div>
                </div>  
            );
        }


    }
}



export default Home;